<template>
  <!-- 商品管理 -->
  <div class="app-container">
    <div class="app-wrap">
      <search-table ref="table" :table-loading="listLoading" :table-data="commodityDataList" @query="getGoodsList(true)" @reset="refresh">
        <template v-slot:row>
          <el-form-item label="商品类型:" label-width="80px">
            <el-select v-model="listQuery.goods_type" placeholder="请选择商品类型" filterable class="marginR10">
              <el-option label="全部" :value="0"/>
              <el-option v-show="item.value" :label="item.label" :value="item.value" v-for="(item, index) in GOODS_TYPE" :key="index"/>
            </el-select>
          </el-form-item>
          <el-form-item label="活动类型:" label-width="80px">
            <el-select v-model="listQuery.activity_type" placeholder="请选择商品类型" filterable class="marginR10">
              <el-option label="全部" :value="0"/>
              <el-option v-show="item.value" :label="item.label" :value="item.value" v-for="(item, index) in ACTIVITY_SHOW_TYPE" :key="index"/>
            </el-select>
          </el-form-item>
        </template>
        <template v-slot:actions>
          <el-button v-permission="'commodity.add'" type="primary" size="mini" icon="el-icon-plus" @click="isShowDetails = true, checkedItem = null">新增</el-button>
          <el-button type="info" size="mini" icon="el-icon-refresh" @click="getGoodsList">刷新</el-button>
          <span class="colorRed" style="font-size:12px;margin-left:20px">*当商品被选用后，不能删除(如果商品对应VIP礼包，key对应的是vip等级)</span>
        </template>
        <template>
          <el-table-column align="center" type="index" width="50">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.isChecked" :label="true" @change="handleCurrentChange(scope.row)">{{ '' }}</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="商品ID" align="center" width="100"/>
          <el-table-column prop="goods_keys" label="商品KEY" align="center" width="100"/>
          <el-table-column prop="is_show" label="是否展示" align="center" width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.is_show==1?'success':'info'">{{ scope.row.is_show==1?'展示':'隐藏'}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="goods_price" label="商品价格" align="center" width="150"/>
          <el-table-column prop="goods_type" label="商品类型" align="center" width="100">
            <template slot-scope="scope">
              <el-tag type="warning">{{ goodsType(scope.row.goods_type) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="activity_type" label="活动类型" align="center" width="100">
            <template slot-scope="scope">
              <el-tag type="">{{ activityType(scope.row.activity_type) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="goods_name" label="商品名称" align="center" />
          <el-table-column prop="remark" label="备注" align="center"/>
          <el-table-column prop="operation" label="操作" align="left" width="200" fixed="right">
            <template slot-scope="scope">
              <el-tooltip effect="dark" v-permission="'commodity.edit'" content="编辑" placement="top-start">
                <el-button size="mini" type="warning" @click.stop="editItem(scope.row)" icon="el-icon-edit-outline" />
              </el-tooltip>
              <el-tooltip effect="dark" v-permission="'commodity.delete'" content="删除" placement="top-start">
                <el-button size="mini" :disabled="scope.row.goods_keys!=''" type="danger" @click="deleteItem(scope.row)" icon="el-icon-delete"/>
              </el-tooltip>
            </template>
          </el-table-column>
        </template>
        <template v-slot:footer>
          <pagination :total="currentTotal" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getGoodsList" />
        </template>
      </search-table>
      <page-details :show="isShowDetails" :data="checkedItem" @onHideDetails="onHideDetails" :activityTypeData="ACTIVITY_SHOW_TYPE" :goodsTypeData="GOODS_TYPE"/>
    </div>
  </div>
</template>

<script>
import {
  throttle
} from '@/utils/index'
import {
  getGoods,
  delGoods
} from '@/api/activity'
import {
  GOODS_TYPE,
  ACTIVITY_SHOW_TYPE
} from "@/utils/enum";
import PageDetails from './page-details.vue'
import SearchTable from '@/components/SearchTable'
import { mapActions } from "vuex";

export default {
  name: 'commodity',
  components: {
    PageDetails,
    SearchTable
  },
  data () {
    return {
      GOODS_TYPE,
      ACTIVITY_SHOW_TYPE,
      listQuery: {
        page: 1,
        size: 50,
        goods_type:0,
        activity_type:0
      },
      isShowDetails: false,
      checkedItem: null,
      listLoading: true,
      commodityDataList: [],
      currentTotal: 0,
    }
  },
  created () {
    
  },
  activated(){
    this.getGoodsList()
  },
  methods: {
    ...mapActions({
      'updateGoodData': 'commonState/updateGoodData'
    }),
    // 获取商品列表
    async getGoodsList (query) {
      let that = this,params=that.listQuery;
      if(query && !query.page){
        params.page=1
        params.size=50
      }
      that.commodityDataList = []
      that.checkedItem = null
      const response = await getGoods(params)
      if (response.code == 1) {
        if(response.data.list){
          response.data.list.forEach(item => {
            item.isChecked = false
            item.goods_price=that.$public.mathNumberDivideWan(item.goods_price)
          })
          that.commodityDataList = response.data.list
          that.currentTotal = response.data.total
        }
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false
    },
    // 商品类型
    goodsType(cellValue){
      return (this.GOODS_TYPE.find((item) => item.value === cellValue)?.label || "-");
    },
    // 活动类型
    activityType(cellValue){
      return (this.ACTIVITY_SHOW_TYPE.find((item) => item.value === cellValue)?.label || "-");
    },
    // 编辑/查看
    editItem (row) {
      let that=this;
      that.handleCurrentChange(row)
      that.isShowDetails=true
    },
    // 删除
    deleteItem (row) {
      const that = this
      that.handleCurrentChange(row)
      that.$confirm(`是否删除【${row.goods_name}】商品?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delGoods({
          id: row.id
        }).then(res => {
          if (res.code == 1) {
            that.$message({
              type: 'success',
              message: res.msg
            })
            that.onHideDetails(true)
          }
        })
      }).catch((err) => {})
    },
    // 选择表格数据
    handleCurrentChange (val) {
      this.checkedItem = val
      this.commodityDataList.map(item => {
        if (item.id === val.id) {
          item.isChecked = true
        } else {
          item.isChecked = false
        }
      })
    },
    onHideDetails (show) {
      this.isShowDetails = false
      if (show) {
        this.getGoodsList(true)
        this.updateGoodData(true)
      }
    },
    // 刷新
    refresh: throttle(function () {
      this.listQuery = {
        page: 1,
        size: 50,
        goods_type:0,
        activity_type:0
      }
      this.getGoodsList()
    }, 2000),
  }
}
</script>

<style lang="scss" scoped>
.pic-url {
  width: 90px;
  display: inline-block;
  object-fit: cover;
  border-radius: 4px;
}
</style>
